<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.wrap,.wrap1 {
				margin: 100px auto;
				width: 80%;
				height: 800px;
				position: relative;
			}
			.wrap img,.wrap1 img {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
			.wrap img:nth-child(2){
				animation-name: rotate;
				animation-duration: 10s;
				animation-iteration-count:infinite ;
				animation-timing-function: linear;
			}
			@keyframes rotate{
				to{
					transform:translate(-50%,-50%) rotate(360deg);
				}
			}
			@keyframes rotate1{
				to{
					transform:translate(-33%,-65%) rotate(360deg);
				}
			}
			.wrap1 img:last-child{
				transform: translate(-33%,-65%);
				transform-origin: 42px 104px;
				animation-name: rotate1;
				animation-duration: 60s;
				animation-iteration-count:infinite ;
				animation-timing-function: steps(60);
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<img src="../../img/m3.png" >
			<img src="../../img/ct3_out.png" >
		</div>
		<div class="wrap1">
			<img src="../../img/m7.png" >
			<img src="../../img/m7_c.png" >
		</div>
	</body>
</html>
